<template>
  <div class="footer_wrapper">
    <div class="footer_contact">
      <a class="first_btn" v-html="$t('footerButton')"></a>
      <a class="second_btn">
        <div v-html="$t('headButton')"></div>
      </a>
    </div>

    <div class="links_wrapper">
      <div class="links_column">
        <div class="links_heading">{{ $t("footerHeader1") }}</div>
        <div class="links_link">{{ $t("footerPlatformLink1") }}</div>
        <div class="links_link">{{ $t("footerPlatformLink2") }}</div>
        <div class="links_link">{{ $t("footerPlatformLink3") }}</div>
        <div class="links_link">{{ $t("footerPlatformLink4") }}</div>
        <div class="links_link">{{ $t("footerPlatformLink5") }}</div>
      </div>
      <div class="links_column">
        <div class="links_heading">{{ $t("footerHeader3") }}</div>
        <div class="links_link">{{ $t("footerSolutionsLink1") }}</div>
        <div class="links_link">{{ $t("footerSolutionsLink2") }}</div>
        <div class="links_link">{{ $t("footerSolutionsLink3") }}</div>
        <div class="links_link">{{ $t("footerSolutionsLink4") }}</div>
      </div>
      <div class="links_column">
        <div class="links_heading">{{ $t("footerHeader4") }}</div>
        <div class="links_link">{{ $t("footerLegalLink1") }}</div>
        <div class="links_link">{{ $t("footerLegalLink2") }}</div>
      </div>
      <div class="links_column">
        <div class="links_heading">{{ $t("footerHeader2") }}</div>
        <div class="links_link">{{ $t("footerCompanyLink1") }}</div>
      </div>
    </div>

    <a href="#" class="home_page">
      <svg width="320" viewBox="0 0 320 320" fill="none" xmlns="http://www.w3.org/2000/svg" class="footer_logo">
        <path fill-rule="evenodd" clip-rule="evenodd"
          d="M146 34H174V58H146V34ZM135 41.2466C113.209 50.8594 98 72.6533 98 98C98 132.242 125.758 160 160 160C194.242 160 222 132.242 222 98C222 72.6533 206.791 50.8594 185 41.2466V54.689C199.945 63.334 210 79.4927 210 98C210 125.614 187.614 148 160 148C132.386 148 110 125.614 110 98C110 79.4927 120.055 63.334 135 54.689V41.2466Z"
          fill="#455C60" />
        <path d="M169 73H151V132H169V73Z" fill="#455C60" />
        <path
          d="M278.935 240.094V267H272.063V222.273H278.702V229.261H279.285C280.333 226.99 281.925 225.165 284.06 223.787C286.196 222.389 288.952 221.69 292.33 221.69C295.358 221.69 298.008 222.312 300.28 223.554C302.551 224.777 304.318 226.641 305.579 229.145C306.841 231.63 307.472 234.775 307.472 238.58V267H300.6V239.046C300.6 235.532 299.688 232.795 297.863 230.834C296.038 228.854 293.534 227.864 290.35 227.864C288.156 227.864 286.196 228.339 284.468 229.291C282.76 230.242 281.41 231.63 280.42 233.455C279.43 235.279 278.935 237.493 278.935 240.094Z"
          fill="#455C60" />
        <path
          d="M239.02 268.048C236.186 268.048 233.614 267.515 231.304 266.447C228.994 265.36 227.159 263.797 225.8 261.759C224.441 259.701 223.762 257.216 223.762 254.304C223.762 251.742 224.266 249.664 225.276 248.073C226.285 246.461 227.635 245.199 229.324 244.287C231.012 243.375 232.876 242.695 234.914 242.249C236.972 241.783 239.04 241.414 241.117 241.142C243.835 240.793 246.038 240.531 247.727 240.356C249.435 240.162 250.678 239.841 251.454 239.395C252.25 238.948 252.648 238.172 252.648 237.065V236.832C252.648 233.959 251.862 231.727 250.289 230.135C248.736 228.543 246.378 227.747 243.213 227.747C239.933 227.747 237.36 228.466 235.497 229.902C233.633 231.339 232.323 232.872 231.566 234.503L225.043 232.173C226.208 229.456 227.761 227.34 229.702 225.825C231.663 224.292 233.798 223.224 236.108 222.622C238.438 222.001 240.729 221.69 242.98 221.69C244.417 221.69 246.067 221.865 247.931 222.215C249.814 222.545 251.629 223.234 253.376 224.282C255.143 225.33 256.608 226.912 257.773 229.028C258.938 231.144 259.52 233.979 259.52 237.531V267H252.648V260.943H252.299C251.833 261.914 251.056 262.953 249.969 264.059C248.882 265.166 247.436 266.107 245.63 266.884C243.825 267.66 241.622 268.048 239.02 268.048ZM240.069 261.875C242.786 261.875 245.077 261.341 246.941 260.274C248.824 259.206 250.241 257.828 251.192 256.139C252.163 254.45 252.648 252.673 252.648 250.81V244.52C252.357 244.869 251.716 245.19 250.726 245.481C249.756 245.753 248.63 245.995 247.348 246.209C246.087 246.403 244.854 246.578 243.65 246.733C242.466 246.869 241.505 246.985 240.767 247.082C238.981 247.315 237.312 247.694 235.759 248.218C234.225 248.723 232.983 249.49 232.032 250.519C231.1 251.528 230.634 252.906 230.634 254.653C230.634 257.041 231.517 258.847 233.284 260.07C235.07 261.273 237.331 261.875 240.069 261.875Z"
          fill="#455C60" />
        <path
          d="M196.885 267.932C192.575 267.932 188.857 266.981 185.732 265.078C182.626 263.156 180.228 260.477 178.539 257.041C176.87 253.586 176.035 249.567 176.035 244.986C176.035 240.404 176.87 236.367 178.539 232.872C180.228 229.359 182.577 226.621 185.586 224.661C188.615 222.68 192.148 221.69 196.186 221.69C198.515 221.69 200.816 222.079 203.087 222.855C205.358 223.632 207.426 224.894 209.289 226.641C211.153 228.368 212.638 230.659 213.745 233.513C214.851 236.367 215.404 239.88 215.404 244.054V246.966H180.927V241.026H208.416C208.416 238.502 207.911 236.25 206.902 234.27C205.912 232.29 204.494 230.727 202.65 229.582C200.825 228.436 198.671 227.864 196.186 227.864C193.449 227.864 191.08 228.543 189.081 229.902C187.1 231.242 185.577 232.989 184.509 235.144C183.441 237.298 182.907 239.609 182.907 242.074V246.034C182.907 249.412 183.49 252.275 184.654 254.624C185.839 256.954 187.479 258.73 189.576 259.953C191.672 261.157 194.109 261.759 196.885 261.759C198.69 261.759 200.321 261.506 201.777 261.002C203.252 260.477 204.524 259.701 205.591 258.672C206.659 257.624 207.484 256.323 208.066 254.77L214.706 256.634C214.007 258.886 212.832 260.866 211.182 262.574C209.532 264.263 207.494 265.583 205.067 266.534C202.641 267.466 199.913 267.932 196.885 267.932Z"
          fill="#455C60" />
        <path
          d="M125.731 267V207.364H146.581C150.735 207.364 154.162 208.082 156.86 209.519C159.558 210.936 161.568 212.848 162.888 215.255C164.208 217.643 164.868 220.293 164.868 223.205C164.868 225.767 164.412 227.883 163.499 229.553C162.606 231.222 161.422 232.542 159.947 233.513C158.491 234.484 156.909 235.202 155.2 235.668V236.25C157.025 236.367 158.86 237.007 160.704 238.172C162.548 239.337 164.091 241.006 165.334 243.181C166.576 245.355 167.197 248.014 167.197 251.159C167.197 254.149 166.518 256.837 165.159 259.225C163.8 261.613 161.655 263.506 158.724 264.904C155.792 266.301 151.978 267 147.28 267H125.731ZM132.953 260.594H147.28C151.997 260.594 155.346 259.681 157.326 257.857C159.325 256.012 160.325 253.78 160.325 251.159C160.325 249.14 159.811 247.277 158.782 245.568C157.753 243.841 156.287 242.462 154.385 241.433C152.482 240.385 150.231 239.861 147.629 239.861H132.953V260.594ZM132.953 233.571H146.348C148.522 233.571 150.483 233.144 152.23 232.29C153.997 231.436 155.394 230.232 156.423 228.679C157.472 227.126 157.996 225.301 157.996 223.205C157.996 220.584 157.083 218.361 155.258 216.536C153.434 214.692 150.541 213.77 146.581 213.77H132.953V233.571Z"
          fill="#455C60" />
        <path
          d="M113.639 232.29L107.466 234.037C107.078 233.008 106.505 232.008 105.748 231.038C105.01 230.048 104.001 229.232 102.72 228.592C101.438 227.951 99.7981 227.631 97.7986 227.631C95.0613 227.631 92.7803 228.262 90.9555 229.524C89.1501 230.766 88.2474 232.348 88.2474 234.27C88.2474 235.978 88.8686 237.328 90.1111 238.318C91.3535 239.308 93.2948 240.133 95.9349 240.793L102.574 242.423C106.573 243.394 109.553 244.879 111.514 246.879C113.474 248.859 114.455 251.412 114.455 254.537C114.455 257.1 113.717 259.39 112.242 261.409C110.786 263.428 108.747 265.02 106.127 266.185C103.506 267.35 100.458 267.932 96.9832 267.932C92.4212 267.932 88.6454 266.942 85.6558 264.962C82.6662 262.982 80.7735 260.089 79.9775 256.284L86.5003 254.653C87.1215 257.061 88.296 258.866 90.0237 260.07C91.7709 261.273 94.0519 261.875 96.8667 261.875C100.07 261.875 102.613 261.196 104.496 259.837C106.398 258.458 107.35 256.808 107.35 254.886C107.35 253.333 106.806 252.033 105.719 250.984C104.632 249.917 102.962 249.121 100.71 248.597L93.2559 246.85C89.1598 245.879 86.1508 244.374 84.229 242.336C82.3265 240.278 81.3753 237.706 81.3753 234.619C81.3753 232.096 82.0838 229.863 83.501 227.922C84.9375 225.981 86.8885 224.457 89.354 223.35C91.8388 222.244 94.6537 221.69 97.7986 221.69C102.225 221.69 105.7 222.661 108.223 224.602C110.766 226.544 112.572 229.106 113.639 232.29Z"
          fill="#455C60" />
        <path
          d="M40.8629 240.094V267H33.9907V222.273H40.6299V229.261H41.2123C42.2606 226.99 43.8525 225.165 45.9879 223.787C48.1233 222.389 50.8799 221.69 54.2578 221.69C57.2862 221.69 59.936 222.312 62.2073 223.554C64.4787 224.777 66.2452 226.641 67.5071 229.145C68.7689 231.63 69.3998 234.775 69.3998 238.58V267H62.5277V239.046C62.5277 235.532 61.6153 232.795 59.7904 230.834C57.9656 228.854 55.4614 227.864 52.2777 227.864C50.084 227.864 48.1233 228.339 46.3956 229.291C44.6872 230.242 43.338 231.63 42.348 233.455C41.3579 235.279 40.8629 237.493 40.8629 240.094Z"
          fill="#455C60" />
        <path d="M20.4433 207.364V267H13.2217V207.364H20.4433Z" fill="#455C60" />
      </svg>
    </a>
    <div class="footer_addy">
      <div>
        InsBean AI, Unit 06, 17th Floor, No. 1192 Century Avenue, Pudong New Area, Shanghai, 200122
        <br />
        <br />
        All contents ©
        2024
        BShanghai Xiaoye Technology Co., Ltd All rights reserved.
      </div>
      <div class=" footer_socials footer_socials-s">
        <div class="footer_socials-block">
          <button class="socialicon_button">
            <svg t="1720251988150" class="footer_btn_icon1" viewBox="0 0 1756 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="17481" width="32" height="32">
              <path
                d="M615.497143 330.057143c0 22.674286 18.285714 40.96 40.96 40.96s40.96-18.285714 40.96-40.96-18.285714-40.96-40.96-40.96S615.497143 307.382857 615.497143 330.057143L615.497143 330.057143z"
                fill="#ffffff" p-id="17482"></path>
              <path
                d="M934.582857 541.805714c0 17.737143 14.445714 32.182857 32.182857 32.182857s32.182857-14.445714 32.182857-32.182857-14.445714-32.182857-32.182857-32.182857C948.845714 509.805714 934.582857 524.068571 934.582857 541.805714z"
                fill="#ffffff" p-id="17483"></path>
              <path
                d="M824.502857 330.057143c0 22.674286 18.285714 40.96 40.96 40.96s40.96-18.285714 40.96-40.96-18.285714-40.96-40.96-40.96S824.502857 307.382857 824.502857 330.057143L824.502857 330.057143z"
                fill="#ffffff" p-id="17484"></path>
              <path
                d="M1361.371429 167.862857c0-79.542857-65.462857-142.262857-142.262857-142.262857L533.577143 25.6C453.851429 25.6 391.314286 91.062857 391.314286 167.862857l0 688.457143c0 79.542857 65.462857 142.262857 142.262857 142.262857l688.457143 0c79.542857 0 142.262857-65.462857 142.262857-142.262857L1361.371429 167.862857zM755.931429 674.377143c-36.754286 0-66.377143-7.497143-103.314286-14.811429L549.668571 711.314286l29.44-88.685714c-73.874286-51.565714-117.942857-118.125714-117.942857-199.131429 0-140.251429 132.754286-250.88 294.948571-250.88 145.005714 0 272.091429 88.32 297.691429 207.177143-9.325714-0.914286-18.834286-1.645714-28.342857-1.645714-140.068571 0-250.697143 104.411429-250.697143 233.325714 0 21.394286 3.291429 42.057143 9.142857 61.805714C774.4 674.011429 765.257143 674.377143 755.931429 674.377143zM1190.948571 777.691429l22.125714 73.691429-80.822857-44.251429c-29.44 7.314286-59.062857 14.811429-88.502857 14.811429-140.251429 0-250.88-95.817143-250.88-213.942857 0-117.942857 110.445714-213.942857 250.88-213.942857 132.571429 0 250.514286 96.182857 250.514286 213.942857C1294.262857 674.377143 1250.194286 733.257143 1190.948571 777.691429z"
                fill="#ffffff" p-id="17485"></path>
              <path
                d="M1095.131429 541.805714c0 17.737143 14.445714 32.182857 32.182857 32.182857 17.737143 0 32.182857-14.445714 32.182857-32.182857s-14.445714-32.182857-32.182857-32.182857C1109.577143 509.805714 1095.131429 524.068571 1095.131429 541.805714z"
                fill="#ffffff" p-id="17486"></path>
            </svg>
          </button>
          <button class="socialicon_button">
            <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="footer_btn_icon">
              <path
                d="M14.3916 15.5H1.60796C1.32239 15.5075 1.04557 15.3979 0.838103 15.1951C0.630634 14.9922 0.509414 14.7128 0.500977 14.4179L0.500977 1.58159C0.509413 1.28673 0.630652 1.00735 0.838139 0.804627C1.04563 0.601908 1.32244 0.492383 1.60796 0.500043H14.3899C14.6757 0.492053 14.953 0.601395 15.1609 0.804116C15.3688 1.00684 15.4905 1.28641 15.4992 1.58159V14.4197C15.49 14.7143 15.3684 14.9932 15.1609 15.1956C14.9535 15.3979 14.6769 15.5074 14.3916 15.5ZM6.34666 6.12338V13.2818H8.56825V9.74167C8.56825 8.83331 8.72656 7.90315 9.90214 7.90315C11.0578 7.90315 11.0578 9.00045 11.0578 9.80101V13.2818H13.2829V9.35592C13.2829 7.58462 12.9592 5.94595 10.6139 5.94595C10.1953 5.9285 9.77979 6.02637 9.40989 6.22952C9.04 6.43267 8.72908 6.73379 8.50903 7.10198H8.47795V6.12338H6.34666ZM2.72374 6.12338V13.2818H4.95178V6.12338H2.72374ZM3.83776 2.56504C3.50131 2.56018 3.17669 2.69317 2.93495 2.9349C2.6932 3.17664 2.55401 3.50744 2.54784 3.85491C2.55386 4.20248 2.69298 4.53344 2.93474 4.7753C3.17651 5.01717 3.50121 5.15024 3.83776 5.14538C4.17436 5.1504 4.49915 5.01738 4.74095 4.77548C4.98275 4.53358 5.12182 4.20254 5.12768 3.85491C5.12182 3.50744 4.98281 3.17655 4.74112 2.93476C4.49944 2.69297 4.17479 2.56002 3.83835 2.56504H3.83776Z"
                fill="#244348"></path>
            </svg>
          </button>
        </div>

        <div class="language">
          <svg viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg" class="language-icon">
            <path fill-rule="evenodd" clip-rule="evenodd"
              d="M66 17H94V41H66V17ZM55 24.2466C33.2095 33.8594 18 55.6533 18 81C18 115.242 45.7583 143 80 143C114.242 143 142 115.242 142 81C142 55.6533 126.791 33.8594 105 24.2466V37.689C119.945 46.334 130 62.4927 130 81C130 108.614 107.614 131 80 131C52.3857 131 30 108.614 30 81C30 62.4927 40.0552 46.334 55 37.689V24.2466Z"
              fill="url(#paint0_linear_5371_6745)" />
            <path d="M89 56H71V115H89V56Z" fill="url(#paint1_linear_5371_6745)" />
            <defs>
              <linearGradient id="paint0_linear_5371_6745" x1="80" y1="17" x2="80" y2="143"
                gradientUnits="userSpaceOnUse">
                <stop stop-color="#30D7F1" />
                <stop offset="0.509925" stop-color="#80F94B" />
                <stop offset="1" stop-color="#F9E444" />
              </linearGradient>
              <linearGradient id="paint1_linear_5371_6745" x1="80" y1="17" x2="80" y2="115"
                gradientUnits="userSpaceOnUse">
                <stop stop-color="#30D7F1" />
                <stop offset="0.459849" stop-color="#79FA4B" />
                <stop offset="1" stop-color="#F9E344" />
              </linearGradient>
            </defs>
          </svg>



          <div :class="locale === 'en' ? 'language-item language-item-active' : 'language-item'"
            @click="changeLanguage('en')">{{ $t("footerLanguageLink2") }}</div>
          <div>|</div>
          <div :class="locale === 'zh' ? 'language-item language-item-active' : 'language-item'" class="language-item"
            @click="changeLanguage('zh')">{{ $t("footerLanguageLink1") }}</div>
        </div>
      </div>
    </div>
    <div class="footer_socials">
      <div class="footer_socials-block">
        <button class="socialicon_button">
          <svg t="1720251988150" class="footer_btn_icon1" viewBox="0 0 1756 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="17481" width="32" height="32">
            <path
              d="M615.497143 330.057143c0 22.674286 18.285714 40.96 40.96 40.96s40.96-18.285714 40.96-40.96-18.285714-40.96-40.96-40.96S615.497143 307.382857 615.497143 330.057143L615.497143 330.057143z"
              fill="#ffffff" p-id="17482"></path>
            <path
              d="M934.582857 541.805714c0 17.737143 14.445714 32.182857 32.182857 32.182857s32.182857-14.445714 32.182857-32.182857-14.445714-32.182857-32.182857-32.182857C948.845714 509.805714 934.582857 524.068571 934.582857 541.805714z"
              fill="#ffffff" p-id="17483"></path>
            <path
              d="M824.502857 330.057143c0 22.674286 18.285714 40.96 40.96 40.96s40.96-18.285714 40.96-40.96-18.285714-40.96-40.96-40.96S824.502857 307.382857 824.502857 330.057143L824.502857 330.057143z"
              fill="#ffffff" p-id="17484"></path>
            <path
              d="M1361.371429 167.862857c0-79.542857-65.462857-142.262857-142.262857-142.262857L533.577143 25.6C453.851429 25.6 391.314286 91.062857 391.314286 167.862857l0 688.457143c0 79.542857 65.462857 142.262857 142.262857 142.262857l688.457143 0c79.542857 0 142.262857-65.462857 142.262857-142.262857L1361.371429 167.862857zM755.931429 674.377143c-36.754286 0-66.377143-7.497143-103.314286-14.811429L549.668571 711.314286l29.44-88.685714c-73.874286-51.565714-117.942857-118.125714-117.942857-199.131429 0-140.251429 132.754286-250.88 294.948571-250.88 145.005714 0 272.091429 88.32 297.691429 207.177143-9.325714-0.914286-18.834286-1.645714-28.342857-1.645714-140.068571 0-250.697143 104.411429-250.697143 233.325714 0 21.394286 3.291429 42.057143 9.142857 61.805714C774.4 674.011429 765.257143 674.377143 755.931429 674.377143zM1190.948571 777.691429l22.125714 73.691429-80.822857-44.251429c-29.44 7.314286-59.062857 14.811429-88.502857 14.811429-140.251429 0-250.88-95.817143-250.88-213.942857 0-117.942857 110.445714-213.942857 250.88-213.942857 132.571429 0 250.514286 96.182857 250.514286 213.942857C1294.262857 674.377143 1250.194286 733.257143 1190.948571 777.691429z"
              fill="#ffffff" p-id="17485"></path>
            <path
              d="M1095.131429 541.805714c0 17.737143 14.445714 32.182857 32.182857 32.182857 17.737143 0 32.182857-14.445714 32.182857-32.182857s-14.445714-32.182857-32.182857-32.182857C1109.577143 509.805714 1095.131429 524.068571 1095.131429 541.805714z"
              fill="#ffffff" p-id="17486"></path>
          </svg>
        </button>
        <button class="socialicon_button">
          <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="footer_btn_icon">
            <path
              d="M14.3916 15.5H1.60796C1.32239 15.5075 1.04557 15.3979 0.838103 15.1951C0.630634 14.9922 0.509414 14.7128 0.500977 14.4179L0.500977 1.58159C0.509413 1.28673 0.630652 1.00735 0.838139 0.804627C1.04563 0.601908 1.32244 0.492383 1.60796 0.500043H14.3899C14.6757 0.492053 14.953 0.601395 15.1609 0.804116C15.3688 1.00684 15.4905 1.28641 15.4992 1.58159V14.4197C15.49 14.7143 15.3684 14.9932 15.1609 15.1956C14.9535 15.3979 14.6769 15.5074 14.3916 15.5ZM6.34666 6.12338V13.2818H8.56825V9.74167C8.56825 8.83331 8.72656 7.90315 9.90214 7.90315C11.0578 7.90315 11.0578 9.00045 11.0578 9.80101V13.2818H13.2829V9.35592C13.2829 7.58462 12.9592 5.94595 10.6139 5.94595C10.1953 5.9285 9.77979 6.02637 9.40989 6.22952C9.04 6.43267 8.72908 6.73379 8.50903 7.10198H8.47795V6.12338H6.34666ZM2.72374 6.12338V13.2818H4.95178V6.12338H2.72374ZM3.83776 2.56504C3.50131 2.56018 3.17669 2.69317 2.93495 2.9349C2.6932 3.17664 2.55401 3.50744 2.54784 3.85491C2.55386 4.20248 2.69298 4.53344 2.93474 4.7753C3.17651 5.01717 3.50121 5.15024 3.83776 5.14538C4.17436 5.1504 4.49915 5.01738 4.74095 4.77548C4.98275 4.53358 5.12182 4.20254 5.12768 3.85491C5.12182 3.50744 4.98281 3.17655 4.74112 2.93476C4.49944 2.69297 4.17479 2.56002 3.83835 2.56504H3.83776Z"
              fill="#244348"></path>
          </svg>
        </button>
      </div>

      <div class="language">
        <svg viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg" class="language-icon">
          <path fill-rule="evenodd" clip-rule="evenodd"
            d="M66 17H94V41H66V17ZM55 24.2466C33.2095 33.8594 18 55.6533 18 81C18 115.242 45.7583 143 80 143C114.242 143 142 115.242 142 81C142 55.6533 126.791 33.8594 105 24.2466V37.689C119.945 46.334 130 62.4927 130 81C130 108.614 107.614 131 80 131C52.3857 131 30 108.614 30 81C30 62.4927 40.0552 46.334 55 37.689V24.2466Z"
            fill="url(#paint0_linear_5371_6745)" />
          <path d="M89 56H71V115H89V56Z" fill="url(#paint1_linear_5371_6745)" />
          <defs>
            <linearGradient id="paint0_linear_5371_6745" x1="80" y1="17" x2="80" y2="143"
              gradientUnits="userSpaceOnUse">
              <stop stop-color="#30D7F1" />
              <stop offset="0.509925" stop-color="#80F94B" />
              <stop offset="1" stop-color="#F9E444" />
            </linearGradient>
            <linearGradient id="paint1_linear_5371_6745" x1="80" y1="17" x2="80" y2="115"
              gradientUnits="userSpaceOnUse">
              <stop stop-color="#30D7F1" />
              <stop offset="0.459849" stop-color="#79FA4B" />
              <stop offset="1" stop-color="#F9E344" />
            </linearGradient>
          </defs>
        </svg>
        <div :class="locale === 'en' ? 'language-item language-item-active' : 'language-item'"
          @click="changeLanguage('en')">{{ $t("footerLanguageLink2") }}</div>
        <div>|</div>
        <div :class="locale === 'zh' ? 'language-item language-item-active' : 'language-item'" class="language-item"
          @click="changeLanguage('zh')">{{ $t("footerLanguageLink1") }}</div>
      </div>
    </div>

    <div class="footer_legal">
      <div>
        {{ $t("footerLegal1") }}
        <br />
        <br />
        {{ $t("footerLegal2") }}
        <br />
        <br />
        {{ $t("footerLegal3") }}
      </div>
    </div>
    <div class="footer_line_1"></div>
    <div class="footer_line_2"></div>
    <div class="footer_line_3"></div>
  </div>
</template>

<script setup>
import { mouseLeaveHandle, mouseEnterHandle } from '@/utils/mouse.js'

import { useI18n } from 'vue-i18n'
const { locale } = useI18n();
const changeLanguage = function (lang) {
  if (!lang) {
    if (location.pathname === '/zh') {
      locale.value = 'zh';
      const meta = document.createElement('meta');
      meta.name = 'InsBean - GenAI 保险平台';
      meta.content = 'InsBean 使保险领域公司能够通过 AI 驱动的数字平台和解决方案向客户提供保险产品和服务。';
      document.head.appendChild(meta);
    }
    else {
      locale.value = 'en';
      const meta = document.createElement('meta');
      meta.name = 'InsBean - The GenAI Insurance Platform';
      meta.content = 'InsBean enables companies in insurance industry to offer insurance products and services to customers through AI-driven digital platform and solution.';
      document.head.appendChild(meta);
    }
  }
  else {
    if (locale.value != lang) {
      if (lang == 'zh') {
        console.info(123);
        location.href = `${location.origin}/zh`;
      }
      else {
        console.info(456);
        location.href = `${location.origin}`;
      }
    }
  }
}
changeLanguage()

</script>

<style scoped lang="less">
:root {
  --progress: 0%;
}

.footer_wrapper {
  background-color: rgb(0, 32, 37);
  display: grid;
  place-items: center;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  justify-content: center;
  font-family: Gellix;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0px;
  line-height: 130%;
  position: relative;
  grid-template-areas:
    'logo vr links'
    'contact vr links'
    'address vr links'
    'address vr legal'
    'socials vr legal';

  z-index: 3;
  overflow: hidden;
  border-radius: 30px 30px 0px 0px;
  padding: 100px 112px;
  gap: 30px 60px;
  translate: none;
  rotate: none;
  scale: none;
  transform: translate(0px, 1px);

  .links_wrapper {
    display: grid;
    grid-template-columns: repeat(3, 161fr);
    gap: 6.055vw;
  }


  .home_page {
    display: flex;
    justify-content: center;

  }

  @media screen and (min-width: 1025px) {
    border-radius: 2.083vw 2.083vw 0px 0px;
    padding: 6.944vw 7.778vw;
    gap: 2.083vw 4.167vw;
    font-size: 1.25vw;
  }

  .footer_contact {
    grid-area: contact;
    display: grid;
    width: 80%;
    gap: 15px;

    @media screen and (min-width: 1025px) {
      gap: 1.042vw;
    }

    .first_btn {
      display: flex;
      -webkit-box-align: center;
      align-items: center;
      -webkit-box-pack: center;
      justify-content: center;
      position: relative;
      color: rgb(0, 32, 37);
      width: fit-content;
      background: linear-gradient(277.33deg,
          rgb(252, 227, 68) -2.48%,
          rgb(121, 250, 75) 47.21%,
          rgb(48, 215, 241) 93.62%) center center / calc(100% + 6px);
      border: 1px solid transparent;
      border-radius: 999px;
      cursor: pointer;
      z-index: 1;
      font-family: Gellix;
      font-weight: 500;
      font-size: 14px;
      letter-spacing: -0.01em;
      line-height: 130%;
      padding: 9px 20px;
      gap: 10px;
      width: 100%;

      @media screen and (min-width: 1025px) {
        padding: 0.625vw 1.389vw;
        gap: 0.694vw;
        font-size: 0.972vw;
      }
    }

    .first_btn::after {
      content: '';
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      border-radius: 999px;
      background: rgb(245, 244, 235);
      z-index: -1;
      opacity: 0;
      transition: opacity 0.2s ease-in-out 0s;
    }

    .second_btn {
      display: flex;
      -webkit-box-align: center;
      align-items: center;
      -webkit-box-pack: center;
      justify-content: center;
      position: relative;
      z-index: 1;
      border: none;
      background: none;
      cursor: pointer;
      transition: color 0.2s ease-in-out 0s;
      width: 100%;
      --progress: 0%;
      font-family: Gellix;
      font-weight: 500;
      font-size: 14px;
      letter-spacing: -0.01em;
      line-height: 130%;
      padding: 9px 20px;
      gap: 10px;
      color: rgb(255, 255, 250) !important;
      fill: rgb(255, 255, 250);

      @media screen and (min-width: 1025px) {
        font-size: 1vw;
        padding: 0.625vw 1.4vw;
        gap: 0.694vw;
      }

      & div {
        position: relative;
        width: max-content;
      }

      & div::before {
        .underline();
      }

      &::after {
        .afterBorder();
        transition: all 0.5s;
      }
    }
  }

  .links_wrapper {
    grid-area: links;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 6.055vw;

    @media screen and (min-width: 1025px) {
      gap: 3.125vw;
    }

    .links_column {
      display: flex;
      flex-direction: column;
      min-width: 161px;

      @media screen and (min-width: 1025px) {
        min-width: 11.181vw;
      }

      .links_heading {
        font-family: Gellix;
        font-weight: 500;
        font-size: 26px;
        line-height: 120%;
        color: rgb(125, 143, 146);
        letter-spacing: -0.02em;
        margin-bottom: 15px;


        @media screen and (min-width: 1025px) {
          font-size: 1.806vw;
          margin-bottom: 1.042vw;
        }
      }

      .links_heading:not(:first-child) {
        margin-top: 25px;

        @media screen and (min-width: 1025px) and (max-width: 1440px) {
          margin-top: 1.736vw;
        }
      }

      .links_link {
        font-family: Gellix;
        font-weight: 500;
        font-size: 14px;
        letter-spacing: -0.01em;
        line-height: 130%;
        color: rgb(255, 255, 250);
        text-decoration: none;
        width: fit-content;
        white-space: nowrap;
        margin: 5px 0px;

        @media screen and (min-width: 1025px) {
          margin: 0.347vw 0px;
          font-size: 0.972vw;
        }

        &::after {
          content: '';
          display: block;
          width: 0px;
          height: 1px;
          background: linear-gradient(277.33deg,
              rgb(252, 227, 68) -2.48%,
              rgb(121, 250, 75) 47.21%,
              rgb(48, 215, 241) 93.62%);
          transition: width 0.3s ease 0s;
        }

        &:hover {
          &::after {
            width: 100%;
          }
        }
      }
    }
  }

  .footer_logo {
    grid-area: logo;
    width: 100%;

    @media screen and (min-width: 1025px) {
      width: 9.722vw;
    }
  }

  .footer_addy {
    grid-area: address;
    font-family: Gellix;
    font-weight: 400;
    font-size: 12px;
    line-height: 130%;
    color: rgb(125, 143, 146);
    text-align: center;
    letter-spacing: -0.02em;
    width: 189px;

    @media screen and (min-width: 1025px) {
      font-size: 0.833vw;
      width: 13.125vw;
    }
  }

  .footer_socials {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;

    @media screen and (max-width: 1024px) {
      display: none;
    }

    @media screen and (min-width: 1025px) {
      grid-area: socials;
      gap: 1.389vw;
    }

    .socialicon_button {
      color: rgb(255, 255, 250);
      position: relative;
      z-index: 1;
      border: none;
      background: none;
      font-family: Gellix;
      font-weight: 500;
      font-size: 14px;
      letter-spacing: -0.01em;
      line-height: 130%;
      cursor: pointer;
      transition: color 0.2s ease-in-out 0s;
      width: 36px;
      height: 36px;
      text-align: center;
      display: flex;
      -webkit-box-align: center;
      align-items: center;
      -webkit-box-pack: center;
      justify-content: center;

      @media screen and (min-width: 1025px) {
        width: 2.5vw;
        height: 2.5vw;
        font-size: 0.972vw;
      }

      &::before {
        content: '';
        position: absolute;
        top: 0px;
        left: 0px;
        bottom: 0px;
        right: 0px;
        z-index: -2;
        opacity: 0;
        background: linear-gradient(277.33deg,
            rgb(252, 227, 68) -2.48%,
            rgb(121, 250, 75) 47.21%,
            rgb(48, 215, 241) 93.62%) 0% 0% / 110% no-repeat;
        border-radius: 99px;
        transition: opacity 0.2s ease-in-out 0s;
      }

      &::after {
        content: '';
        position: absolute;
        top: 0px;
        left: 0px;
        bottom: 0px;
        right: 0px;
        z-index: -1;
        mask-image: linear-gradient(rgb(255, 255, 255) 0px,
            rgb(255, 255, 255) 0px),
          linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px);
        -webkit-mask-position-x: 0%;
        -webkit-mask-position-y: 0%;
        mask-size: auto, auto;
        mask-repeat: repeat, repeat;
        mask-origin: padding-box, border-box;
        mask-clip: padding-box, border-box;
        mask-mode: match-source, match-source;
        mask-composite: exclude;
        border-radius: 99px;
        border-width: 1px;
        border-style: solid;
        border-color: transparent;
        border-image: initial;
        background: linear-gradient(277.33deg,
            rgb(252, 227, 68) -2.48%,
            rgb(121, 250, 75) 47.21%,
            rgb(48, 215, 241) 93.62%) center center / 120% 120% no-repeat;
      }

      &:hover {
        &::before {
          opacity: 1;
        }
      }

      .footer_btn_icon {
        height: auto;
        width: 17px;

        path {
          fill: rgb(255, 255, 255);
        }

        @media screen and (min-width: 1025px) {
          width: 1.181vw;
        }
      }

      .footer_btn_icon1 {
        height: auto;
        width: 3vw;

        path {
          fill: rgb(255, 255, 255);
        }

        @media screen and (min-width: 1025px) {
          width: 2vw;
        }
      }
    }
  }

  .footer_socials-s {
    display: flex;
    margin: 10px 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    @media screen and (max-width: 1024px) {
      gap: 1.389vw;
      grid-area: socials;
    }

    @media screen and (min-width: 1025px) {
      display: none;
    }
  }

  .footer_legal {
    grid-area: legal;
    font-family: Gellix;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0px;
    line-height: 130%;
    color: rgb(125, 143, 146);
    padding-bottom: 10px;
    justify-self: flex-start;
    max-width: 906px;

    @media screen and (min-width: 1025px) {
      max-width: 62.917vw;
      font-size: 0.833vw;
    }
  }

  .footer_line_1 {
    width: 1px;
    border-left: 1px dashed rgb(36, 67, 72);
    grid-area: vr;
    position: relative;
    display: none;

    @media screen and (min-width: 1025px) {
      display: block;
      height: calc(100% + 13.889vw);
    }
  }

  .footer_line_2 {
    height: 1px;
    width: 100%;
    border-top: 1px dashed rgb(36, 67, 72);
    grid-area: hr;
    display: none;
  }

  .footer_line_3 {
    height: 1px;
    width: 100%;
    border-top: 1px dashed rgb(36, 67, 72);
    grid-area: hr;
    display: none;
  }
}


.footer_socials-block {
  display: flex;
  gap: 5.333vw;

  @media screen and (min-width: 1025px) {
    gap: 1.389vw;
  }
}

.language {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: #7d8f92;
}

.language-icon {
  width: 2vw;
  height: 2vw;
  margin-right: .5vw;
  min-width: 30px;
  min-height: 30px;

  @media screen and (max-width: 500px) {
    margin: 10px;
  }

}

.language-item {
  margin: 0 .4vw;

  @media screen and (max-width: 500px) {
    margin: 5px;
  }
}

.language-item-active {
  color: #fff;
}

@media screen and (max-width: 500px) {
  .footer_wrapper {
    padding: 20px;
    border-radius: 0px;
    display: block;

    .second_btn {
      border-radius: 999px;

      &::after {
        border-radius: 999px !important;
      }
    }

    .footer_contact {
      margin: 20px auto;
      width: 80vw;
      height: 40vw;
    }

    .footer_logo {
      width: 37.333vw;
    }

    .home_page {
      display: flex;
      justify-content: center;

    }

    .footer_socials {
      .socialicon_button {
        width: 9.6vw;
        height: 9.6vw;

        .footer_btn_icon {
          width: 4vw;
        }

        .footer_btn_icon1 {
          width: 7.5vw;
        }
      }


    }

    .footer_addy {
      margin: 10px auto;
      font-size: 3.2vw;
    }

    .links_wrapper {
      display: flex;
      width: calc(100% + 40px);
      transform: translate(-20px, 0);
      padding: 0 20px;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      padding-bottom: 10px;
      border-bottom: 2px dotted rgb(69, 92, 96);

      .links_column {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin: 0 auto;

        .links_heading {
          width: 100%;
          flex-shrink: 0;
          position: relative;
          font-size: 5.333vw;
          line-height: 130%;
          position: relative;
          padding-top: 2.67vw;
          grid-column: span 2;
        }

        .links_heading::before {
          content: "";
          position: absolute;
          width: calc(-1px + 100vw);
          height: 1px;
          top: 0px;
          left: -4vw;
          border-top: 1px dashed rgb(36, 67, 72);
        }


        .links_link {
          font-size: 3.2vw;
          width: 50%;
          white-space: break-spaces;
          text-align: left;
          padding-left: 10px;
          box-sizing: border-box;
        }
      }
    }

    .footer_legal {
      margin: 20px 0 0 0;
      font-size: 2.4vw;
    }

    .footer_line_2 {
      display: block;
      width: calc(100% + 8.533vw);
    }

    .footer_line_3 {
      display: none;
    }
  }
}

@media screen and (min-width: 501px) and (max-width: 1024px) {
  .footer_wrapper {
    grid-template-columns: 178fr 189fr 450fr;
    grid-template-areas:
      "logo address contact"
      "hr hr hr"
      "links links links"
      "hr2 hr2 hr2"
      "legal legal legal";
    gap: 60px 54px;
    padding: 100px 50px;

    border-radius: 2.93vw 2.93vw 0px 0px;
    font-size: 1.758vw;

    .footer_addy {
      font-size: 1.172vw;

    }

    .footer_logo {
      width: 100%;
      max-width: 100%;
    }

    .footer_contact {
      gap: 1.953vw;
      width: 100%;
      place-self: start;

      .first_btn {
        width: 100%;
        padding: 1.758vw 2.93vw;
        gap: 1.465vw;
        font-size: 1.953vw;
      }

      .second_btn {
        color: rgb(255, 255, 250) !important;

        padding: 1.758vw 2.93vw;
        gap: 1.465vw;
        font-size: 1.953vw;
      }
    }

    .home_page {
      display: flex;
      justify-content: center;
    }

    .footer_addy {
      margin: 10px auto;
    }

    .links_wrapper {
      .links_column {
        white-space: normal;
        // margin: 0 5vw;
        // width: 26.036vw;

        .links_heading {
          // margin-bottom: 0px !important;
          font-size: 2.539vw;
        }

        .links_link {
          width: 20vw;
          white-space: break-spaces !important;
          font-size: 1.758vw;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 130%;
        }
      }
    }

    .footer_socials {
      .socialicon_button {
        width: 3.516vw;
        height: 3.516vw;

        .footer_btn_icon {
          width: 1.66vw;
        }

        .footer_btn_icon1 {
          width: 3vw;
        }
      }


    }

    .footer_legal {
      // margin: 0 auto;
      font-family: Gellix;
      font-weight: 400;
      font-size: 1.563vw;
      letter-spacing: 0px;
      line-height: 145%;
    }

    .footer_line_2 {
      display: block;
      width: calc(100% + 9.766vw);
    }

    .footer_line_3 {
      display: block;
      width: calc(100% + 9.766vw);
      grid-area: hr2;
    }
  }

  .footer_socials-block {
    gap: 1.953vw;
  }
}
</style>
